<template>
  <div class="saleReport">
    <jc-title />
    <el-tabs v-model="activeName">
      <el-tab-pane name="planSingle" :label="$t('market.planSingle')">
        <planSingle />
      </el-tab-pane>
      <el-tab-pane name="diningTable" :label="$t('market.diningTable')">
        <diningTable />
      </el-tab-pane>
      <el-tab-pane name="purchaseDetails" :label="$t('market.purchaseDetails')">
        <purchaseDetails />
      </el-tab-pane>
      <el-tab-pane name="puoductSchedule" :label="$t('market.puoductSchedule')">
        <puoductSchedule />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'SaleReport',
  components: {
    planSingle: () => import('@/views/production/planManagement/planReport/planSingle'),
    diningTable: () => import('@/views/production/planManagement/planReport/diningTable'),
    purchaseDetails: () => import('@/views/production/planManagement/planReport/purchaseDetails'),
    puoductSchedule: () => import('@/views/production/planManagement/planReport/puoductSchedule')
  },
  data() {
    return {
      activeName: 'planSingle' // tab name
    }
  }
}
</script>

<style scoped lang="scss">
.saleReport {
  @include listBom;
  .el-tabs::v-deep .el-tabs__nav-next,
  .el-tabs::v-deep .el-tabs__nav-prev {
    line-height: 28px;
    font-size: 14px;
  }
  .el-table {
    &::v-deep thead.is-group th {
      padding: 5px 0;
    }
  }
}
.btn1 {
  margin-left: 450px !important;
}

.el-dialog .el-dialog__body{
  //text-align: center;
}
.iframe-content {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.el-form {
  display: flex;
}
.productImg{
  height: auto;
  max-height: 30px;
}
.image{
  width: auto;
  height: 100%;
  max-height: 600px;
}
</style>
